<style>

</style>
<template>
    <div class="page-my-img">
        <image :key="id" v-if="isShow" :src="image[attrName]" v-bind:style="image.imgStyle"
               alt="图片加载失败" mode="" :lazy-load="true" :fade-show="true"></image>
    </div>
</template>

<script>

    import {SysFileService} from "../dev/services/sys-file.service";
    import {CommonUtil} from "../dev/core/utils/common.util";

    export default {
        props: {
            obj: Object, // 当前对象
            sysFile: Object, // 过滤参数
            attrName: { // 将图片url赋予哪个属性
                type: String,
                default: "thumbnailUrl"
            },
            defaultUrl: { // 默认显示图片
                type: String,
                default: "/static/default-image/goods.jpg"
            },
            customStyle: { // 自定义样式
                type: String,
                default: ""
            },
            customVueStyle: { // {'backgroundColor':'green'} 自定义样式
                type: Object,
                default: null
            },
            imageView: { // 七牛云图片裁剪  imageView2/1/w/300/h/300   imageView2/1/w/100/h/100
                type: String,
                default: null
            }
        },
        data() {
            return {
                id: CommonUtil.generateUUID(),
                isShow: false,
                image: null
            }
        },
        watch: {
            obj: {
                deep: true, // 深度监听
                handler(newVal, oldVal) {
                    console.log("myImg参数改变，即将刷新...", `新值：${newVal}`, `旧值：${oldVal}`)
                    this.init();
                }
            }
        },
        mounted() {
            this.init();
        },
        methods: {
            init() {
                const _self = this;
                console.log("myImg------------------------->obj", this.obj);
                this.isShow = false;

                if (this.obj) {
                    _self.image = Object.assign({}, this.obj);
                    if (_self.customStyle) {
                        _self.image.imgStyle = _self.customStyle;
                    }

                    // <div [ngStyle]="{'background-color':'green'}"></<div>
                    // if (_self.customStyle) {
                    //     let styles = _self.customStyle.split(";");
                    //     _self.image.imgStyle = {};
                    //     styles.forEach(style => {
                    //         _self.image.imgStyle[CommonUtil.trim(CommonUtil.toAttrNameCss(style.split(":")[0]))] = CommonUtil.trim(style.split(":")[1]);
                    //     });
                    // }

                    // customVueStyle = {'backgroundColor':'green'}
                    // if (_self.customVueStyle) {
                    //     _self.image.imgStyle = _self.customVueStyle;
                    // }

                    if (_self.image[_self.attrName]) { // 已存在图片链接，则直接显示
                        _self.appendAttr();
                        _self.$forceUpdate();
                    } else {
                        new SysFileService().findQiniuCloudImageUrl(_self.sysFile).then(result => {
                            if (result.url) {
                                _self.image[_self.attrName] = result.url;
                            }

                            _self.appendAttr();
                            _self.$forceUpdate();
                            console.log(_self.image[_self.attrName])
                        })
                    }
                }
            },
            appendAttr() {
                const _self = this;
                _self.isShow = true;
                if (_self.image[_self.attrName]) {
                    if (_self.image[_self.attrName].indexOf("_timestamp") !== -1) {
                        return;
                    }
                    if (_self.image[_self.attrName].indexOf("?") === -1) {
                        _self.image[_self.attrName] = _self.image[_self.attrName] + "?_timestamp=" + new Date().getTime();
                    } else {
                        _self.image[_self.attrName] = _self.image[_self.attrName] + "&_timestamp=" + new Date().getTime();
                    }

                    if (_self.imageView) {
                        _self.image[_self.attrName] = _self.image[_self.attrName] + "&" + _self.imageView;
                    }
                } else {
                    _self.image[_self.attrName] = _self.defaultUrl;
                    if (_self.defaultUrl.indexOf("/") === 0) {  // todo 如果引用的是静态图片，则不需要加额外参数。
                        return;
                    }
                    if (_self.image[_self.attrName].indexOf("_timestamp") !== -1) {
                        return;
                    }
                    if (_self.image[_self.attrName].indexOf("?") === -1) {
                        _self.image[_self.attrName] = _self.image[_self.attrName] + "?_timestamp=" + new Date().getTime();
                    } else {
                        _self.image[_self.attrName] = _self.image[_self.attrName] + "&_timestamp=" + new Date().getTime();
                    }
                }

                if (_self.image[_self.attrName].indexOf("uuid") === -1) {
                    if (_self.image[_self.attrName].indexOf("?") === -1) {
                        _self.image[_self.attrName] = _self.image[_self.attrName] + "?uuid=" + CommonUtil.generateUUID();
                    } else {
                        _self.image[_self.attrName] = _self.image[_self.attrName] + "&uuid=" + CommonUtil.generateUUID();
                    }
                }
                _self.$forceUpdate();
            }
        }
    }
</script>
